<template>
	<!-- 头部 -->
	<div>

		<div class="top-icon" @click="logout">
			<span class="el-icon-switch-button"></span>
		</div>
		<div class="top-icon">
			<img src="@/assets/img/common_btn_message_s.png" alt="">
		</div>
		<!-- <el-popover
		    placement="bottom"
		    width="50"
		    trigger="click"
		   >
		   <div style="text-align: center;">个人中心</div> -->
			<div class="top-info-box" @click="show_info" slot="reference">
				<span class="el-icon-user top-info-box-icon"></span>
				<span class="top-info-box-text">{{username}}</span>
				<span class="el-icon-caret-bottom"></span>
			</div>
		  <!-- </el-popover> -->
		<template v-if="is_show">
			<div class="all-screen"></div>
			<div class='add-box'>
				<UserInfo @saveEdit='saveEdit'></UserInfo>
			</div>
		</template>
	</div>
</template>
<script>
	import UserInfo from '@/components/public/UserInfo.vue'
	export default {
		components:{
			UserInfo
		},
		data(){
			return{
				username:'',
				is_show:false
			}
		},
		mounted(){
			this.username = localStorage.getItem('username');
		},
		methods:{
			saveEdit() {
				this.is_show = false;
			},
			show_info(){
				this.is_show = !this.is_show;
			},
			logout(){
				localStorage.clear();
				this.$router.push('/');
			}
		}
	}
	import '@/assets/css/top.css'
</script>
